<template>
  <div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="data"
      highlight-current-row
      size="small"
      style="width: 100%;"
      @current-change="handleCurrentChange"
    >
      <el-table-column :show-overflow-tooltip="true" prop="eqptcode" label="设备编号" sortable />
      <el-table-column :show-overflow-tooltip="true" prop="eqptname" label="设备名称" />
      <el-table-column :show-overflow-tooltip="true" prop="brandname" label="品牌" :formatter="formatBrand" />
      <el-table-column :show-overflow-tooltip="true" prop="modelname" label="型号" :formatter="formatModel" />
      <el-table-column :show-overflow-tooltip="true" prop="location" label="安装位置" />
      <el-table-column :show-overflow-tooltip="true" prop="purtime" label="购置时间" :formatter="dateFormat" />
      <el-table-column :show-overflow-tooltip="true" prop="customerName" label="所属客户" />
      <el-table-column :show-overflow-tooltip="true" prop="eqptstate" label="设备状态" :formatter="formatStatus" />
      <el-table-column
        v-if="checkPermission(['ADMIN','TEQUIPMENT_ALL','TEQUIPMENT_EDIT','TEQUIPMENT_DELETE'])"
        label="操作"
        align="center"
        width="120px"
      >
        <template slot-scope="scope">
          <Edit v-permission="['ADMIN','TEQUIPMENT_ALL','TEQUIPMENT_EDIT']" :data="scope.row" :sup-this.sync="supThis" :is-view="true" :is-add="false" />
          <Eqptqrcode
            v-permission="['ADMIN','TEQUIPMENT_ALL','TEQUIPMENT_EDIT']"
            :data="scope.row"
            :sup-this="supThis"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <el-row style="margin-top: 8px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>模块信息</span>
        </div>
        <Eqptmodel ref="eqptmodel" />
      </el-card>
    </el-row>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import { getDictDetails } from '@/api/dictDetail'
import { getAllEqptType } from '@/api/tEqpttype'
import Eqptmodel from '@/views/assetsmgmt/eqptmodel/index'
import Edit from '@/views/assetsmgmt/equipment/module/edit'
import Eqptqrcode from '@/views/assetsmgmt/equipment/module/eqptqrcode'

export default {
  components: {
    Eqptmodel,
    Eqptqrcode,
    Edit
  },
  mixins: [initData],
  data() {
    return {
      supThis: this,
      eqptModelnameList: [], // 类型
      eqptBrandList: [], // 品牌列表
      eqptstatelist: [],
      selectedEqptId: 0
    }
  },
  mounted() {
    this.getEqptBrand()
    this.getAllModels()
    this.getEqptStates()
  },
  methods: {
    checkPermission,
    handleCurrentChange(val) {
      if (val) {
        this.$refs.eqptmodel.eqptId = val.id
        this.$refs.eqptmodel.init()
        this.selectedEqptId = val.id
      }
    },
    // 品牌列表
    getEqptBrand() {
      getDictDetails('eqpt_brand').then(res => {
        this.eqptBrandList = res.content
      })
    },
    // 全部类型
    getAllModels() {
      getAllEqptType().then(res => {
        this.eqptModelnameList = res.content
      }).catch(err => {
        console.log(err)
      })
    },
    getEqptStates() {
      getDictDetails('eqpt_status').then(res => {
        this.eqptstatelist = res.content
      })
    },
    // 品牌
    formatBrand(row, column) {
      if (!row['brandname']) {
        return ''
      }
      var eqptBrandList = this.eqptBrandList
      for (var brand in eqptBrandList) {
        if (eqptBrandList[brand]['id'] === parseInt(row['brandname'])) { return eqptBrandList[brand]['label'] }
      }
      return row['brandname']
    },
    // 型号
    formatModel(row, column) {
      if (!row['modelname']) {
        return ''
      }
      var eqptModelnameList = this.eqptModelnameList
      for (var brand in eqptModelnameList) {
        if (eqptModelnameList[brand]['id'] === parseInt(row['modelname'])) { return eqptModelnameList[brand]['name'] }
      }
      return row['modelname']
    },
    formatStatus(row, column) {
      var eqptstatelist = this.eqptstatelist
      for (var index in eqptstatelist) {
        if (eqptstatelist[index]['value'] === row['eqptstate']) { return eqptstatelist[index]['label'] }
      }
      return row['eqptstate']
    },
    dateFormat: function(row, column) {
      var t = new Date(row.purtime)// row 表示一行数据, purtime 表示要格式化的字段名称
      return t.getFullYear() + '-' + (t.getMonth() + 1) + '-' + t.getDate()
    },
    beforeInit() {
      this.url = 'api/tEquipment'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      // const type = query.type
      // const value = query.value
      if (query.eqptsystem) {
        this.params['eqptsystem'] = query.eqptsystem
      }
      if (query.eqpttypeid) {
        this.params['eqpttypeid'] = query.eqpttypeid
      }
      if (query.eqptname) {
        this.params['eqptname'] = query.eqptname
      }
      if (query.eqptstate) {
        this.params['eqptstate'] = query.eqptstate
      }
      if (query.brandname) {
        this.params['brandname'] = query.brandname
      }
      if (query.customerName) {
        this.params['customerName'] = query.customerName
      }

      // if (type && value) { this.params[type] = value }
      return true
    },
    search({ customerName }) {
      this.query.customerName = customerName
      this.init()
    }
  }
}
</script>

